<template>
	<cl-page>
		<view class="captcha-page">
			<!-- 头部信息 -->
			<view class="header">
				<text class="title">验证码验证</text>
				<text class="subtitle">验证码已发送至 {{ formatPhone(phone) }}</text>
			</view>

			<!-- 验证码输入 -->
			<view class="captcha-section">
				<view class="captcha-input">
					<input
						v-for="(item, index) in captchaList"
						:key="index"
						class="input-item"
						:class="{ active: currentIndex === index }"
						type="number"
						maxlength="1"
						:value="item"
						@input="onInput(index, $event)"
						@focus="currentIndex = index"
						@blur="currentIndex = -1"
						:disabled="loading"
					/>
				</view>

				<!-- 重新发送 -->
				<view class="resend-section">
					<text v-if="countdown > 0" class="countdown-text">
						{{ countdown }}s 后可重新发送
					</text>
					<text v-else class="resend-btn" @tap="resendCode"> 重新发送验证码 </text>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="tips">
				<text class="tips-text"> 收不到验证码？请检查手机号是否正确，或稍后重试 </text>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch, nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useCool } from "/@/cool";

const { router } = useCool();

const phone = ref("");
const loading = ref(false);
const countdown = ref(60);
const currentIndex = ref(-1);
const captchaList = reactive(["", "", "", "", "", ""]);

// 格式化手机号
const formatPhone = computed(() => {
	return (phoneNumber: string) => {
		if (!phoneNumber) return "";
		return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
	};
});

// 验证码字符串
const captchaCode = computed(() => {
	return captchaList.join("");
});

// 页面加载
onLoad((options) => {
	if (options?.phone) {
		phone.value = options.phone;
		startCountdown();
	}
});

// 开始倒计时
function startCountdown() {
	const timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			clearInterval(timer);
		}
	}, 1000);
}

// 输入处理
function onInput(index: number, event: any) {
	const value = event.detail?.value || event.target?.value || "";

	// 只允许数字
	if (!/^\d*$/.test(value)) {
		return;
	}

	captchaList[index] = value;

	// 自动跳转到下一个输入框
	if (value && index < captchaList.length - 1) {
		currentIndex.value = index + 1;
		nextTick(() => {
			const inputs = document.querySelectorAll(".input-item");
			if (inputs[index + 1]) {
				(inputs[index + 1] as HTMLInputElement).focus();
			}
		});
	}
}

// 重新发送验证码
function resendCode() {
	if (countdown.value > 0) return;

	countdown.value = 60;
	startCountdown();

	// 清空输入
	captchaList.fill("");
	currentIndex.value = 0;

	uni.showToast({ title: "验证码已重新发送", icon: "success" });
}

// 监听验证码变化，自动验证
watch(captchaCode, async (newCode) => {
	if (newCode.length === 6) {
		try {
			loading.value = true;

			// 模拟验证API
			await new Promise((resolve) => setTimeout(resolve, 1000));

			// 模拟验证结果
			const isValid = newCode === "123456"; // 模拟验证码

			if (isValid) {
				// 保存登录状态
				uni.setStorageSync("token", "mock_token_123");

				uni.showToast({ title: "验证成功", icon: "success" });

				setTimeout(() => {
					uni.switchTab({ url: "/pages/index/home" });
				}, 1000);
			} else {
				uni.showToast({ title: "验证码错误", icon: "error" });
				// 清空输入
				captchaList.fill("");
				currentIndex.value = 0;
			}
		} catch (error) {
			uni.showToast({ title: "验证失败", icon: "error" });
		} finally {
			loading.value = false;
		}
	}
});
</script>

<style lang="scss" scoped>
.captcha-page {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 120rpx 48rpx 48rpx;
}

.header {
	text-align: center;
	color: #ffffff;
	margin-bottom: 80rpx;
}

.title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	margin-bottom: 16rpx;
}

.subtitle {
	font-size: 28rpx;
	opacity: 0.8;
}

.captcha-section {
	background-color: #ffffff;
	border-radius: 32rpx;
	padding: 64rpx 48rpx;
	text-align: center;
}

.captcha-input {
	display: flex;
	justify-content: space-between;
	gap: 16rpx;
	margin-bottom: 48rpx;
}

.input-item {
	width: 80rpx;
	height: 80rpx;
	border: 2rpx solid #e8e8e8;
	border-radius: 12rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	transition: all 0.3s ease;

	&.active {
		border-color: #667eea;
		background-color: #f8f9ff;
	}

	&:focus {
		outline: none;
		border-color: #667eea;
		background-color: #f8f9ff;
	}
}

.resend-section {
	margin-bottom: 32rpx;
}

.countdown-text {
	font-size: 28rpx;
	color: #999;
}

.resend-btn {
	font-size: 28rpx;
	color: #667eea;
	text-decoration: underline;
}

.tips {
	margin-top: 48rpx;
	text-align: center;
}

.tips-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.5;
}
</style>
